<style scoped>
.spec_title{
  padding: 7px 10px;
  line-height: 16px;
  font-weight: 400;
}
.spec_title .label{
    display: inline-block;
    width: 80px;
}
</style>

<script type="text/x-template"  id="skuSelect">
  <div class="container">
   <div class="spec_title" v-for="(spec, index) in skusData" :key="spec.id + '_id'">
	<span class="label">{{spec.value}}：</span>
	<el-button v-for="option in spec.leaf" :key="option.id" @click="selectSku(index, option)" :type="activeSku[index].option.id === option.id ? 'primary' : ''">
	 {{option.value}}
	</el-button>
   </div>
  </div>
</script>
<script type="text/javascript">
		var skuSelectJs = {
			template:'#skuSelect'
			, props:{
				skusData: {
					type: Array,
					default() {
					  return []
					},
				  },
			}
			,data:function() {
				return {
					activeSku: [
						{
							value:"1",
							leaf:[]
						}
					]
				}
			}
			,watch: {
					skusData: {
					  deep: true,
					  immediate: true,
					  handler: function handler(val) {
						this.activeSku = val.map(function (item) {
						  return {
							spec: {
							  value: item.value,
							  id: item.id
							},
							option: {}
						  };
						});
					  }
					}
			},
			methods: {
				selectSku: function selectSku(index, option) {
				  if (this.activeSku[index].option && this.activeSku[index].option.id === option.id) return this.activeSku[index].option = {};
				  this.activeSku[index].option = option;
				}
			  }
			,created: function(){
			}
			
		}
</script>